<template>
  <el-form ref="formRef" :label-width="130" label-position="left" :model="basicData.form" class="information" :show-message="false">
    <el-form-item prop="customerName" label="企业名称:" required>
      <el-input class="site-input" v-model="basicData.form.customerName" clearable></el-input>
    </el-form-item>

    <el-form-item label="组织机构代码：">
      <el-input class="site-input" v-model="basicData.form.organizingInstitutionCode" clearable></el-input>
    </el-form-item>

    <el-form-item label="营业执照：" prop="businessLicense" required>
      <div class="business-content">
        <el-upload ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'businessLicense')" :before-upload="beforeUpload">
          <img v-if="basicData.form.businessLicense" :src="basicData.form.businessLicense" />
          <div class="noImg" v-else>
            <el-icon class="icon"><Plus /></el-icon>
            <div class="tip" scope.slot="tip">点击上传</div>
          </div>
        </el-upload>
      </div>
    </el-form-item>
    <el-form-item class="legalPersonCardDate" label="证件有效期：" prop="businessCardStartDate" required>
      <el-date-picker v-model="basicData.form.businessCardStartDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.businessCardEndDate" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
    </el-form-item>
    <el-form-item label="医疗机构执业许可证：">
      <div class="business-content">
        <el-upload ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'medicalInstitution')" :before-upload="beforeUpload">
          <img v-if="basicData.form.medicalInstitution" :src="basicData.form.medicalInstitution" />
          <div class="noImg" v-else>
            <el-icon class="icon"><Plus /></el-icon>
            <div class="tip" scope.slot="tip">点击上传</div>
          </div>
        </el-upload>
      </div>
    </el-form-item>

    <el-form-item class="legalPersonCardDate" label="证件有效期：">
      <el-date-picker v-model="basicData.form.institutionCardStartDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.institutionEndDate" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
    </el-form-item>

    <el-form-item label="法人姓名：">
      <el-input class="site-input" v-model="basicData.form.legalPersonName" clearable></el-input>
    </el-form-item>

    <el-form-item label="身份证号：">
      <el-input class="site-input" v-model="basicData.form.legalPersonIdNumber" clearable></el-input>
    </el-form-item>

    <div class="legalPersonCard">
      <el-form-item label="身份证正反面：">
        <el-upload ref="upload" accept=".jpg,.png,.jpeg" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'legalPersonCardPictureObverse')" :before-upload="beforeUpload">
          <img v-if="basicData.form.legalPersonCardPictureObverse" :src="basicData.form.legalPersonCardPictureObverse" />
          <div class="noImg" v-else>
            <el-icon class="icon"><Plus /></el-icon>
            <div class="tip" scope.slot="tip">点击上传</div>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-upload ref="upload" accept=".jpg,.png,.jpeg" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'legalPersonCardPictureReverse')" :before-upload="beforeUpload">
          <img v-if="basicData.form.legalPersonCardPictureReverse" :src="basicData.form.legalPersonCardPictureReverse" />
          <div class="noImg" v-else>
            <el-icon class="icon"><Plus /></el-icon>
            <div class="tip" scope.slot="tip">点击上传</div>
          </div>
        </el-upload>
      </el-form-item>
    </div>

    <el-form-item class="legalPersonCardDate" label="证件有效期：">
      <el-date-picker v-model="basicData.form.legalPersonCardStartDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.legalPersonCardEndDate" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
    </el-form-item>

    <el-form-item label="联系人：" prop="contactMan" required>
      <el-input class="site-input" v-model="basicData.form.contactMan" clearable></el-input>
    </el-form-item>

    <el-form-item label="联系电话：" prop="contactPhone" :rules="{ required: true, validator: validatePhone, trigger: 'blur' }">
      <el-input class="site-input" v-model="basicData.form.contactPhone" clearable></el-input>
    </el-form-item>

    <el-form-item prop="registeredAddress" v-if="route.path === '/register'" label="注册地址：" required>
      <el-input class="site-input" v-model="basicData.form.registeredAddress" clearable></el-input>
    </el-form-item>

    <el-form-item prop="registeredAddress" v-else label="联系地址：" required>
      <el-input class="site-input" v-model="basicData.form.registeredAddress" clearable></el-input>
    </el-form-item>

    <el-form-item label="纳税识别号：" prop="taxpayerId" required>
      <el-input class="site-input" v-model="basicData.form.taxpayerId" clearable></el-input>
    </el-form-item>

    <el-form-item prop="depositBank" label="开户银行：" required>
      <el-input class="site-input" v-model="basicData.form.depositBank" clearable></el-input>
    </el-form-item>

    <el-form-item prop="bankAccount" label="银行账户：" required>
      <el-input v-model="basicData.form.bankAccount" class="site-input" clearable></el-input>
    </el-form-item>
    <slot />
  </el-form>
</template>

<script setup>
import { reactive, toRefs, shallowRef } from 'vue'
import { useRoute } from 'vue-router'
import { apiBasePath } from '@/api/config'
import { Plus, Minus } from '@element-plus/icons-vue'

const route = useRoute()
const props = defineProps(['infoForm'])
const { infoForm } = toRefs(props)

let formRef = shallowRef()

let basicData = reactive({ form: infoForm })

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3456789]\d{9}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}

const actionUrl = apiBasePath + '/medinstrument/site/uploadSingleFile'

const headers = {
  Authorization: 'Bearer ' + localStorage.getItem('_site_token')
}

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png/jpeg文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
  }
  return isJPG && isLt1M
}

const onUploadLicenseSuccess = (file, fld) => {
  basicData.form.qualificationType === fld ? (basicData.form.license = file.data) : (basicData.form.license = '')
}

const onUploadSuccess = (file, fld) => {
  basicData.form[fld] = file.data
}

const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        resolve()
      } else {
        reject()
      }
    })
  })
}

defineExpose({ submit })

</script>

<style lang="less" scoped>
.site-input {
  width: 430px !important;
}

.business-content {
  display: flex;

  .desc {
    width: 307px;
    height: 32px;
    font-size: 12px;
    color: var(--span-color-text);
    line-height: 16px;
    margin-left: 12px;
    margin-top: 44px;
  }
}

.legalPersonCard {
  display: flex;

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    margin-right: 20px;
  }
}

.legalPersonCardDate {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }

  .time-icon {
    font-size: 8px;
    margin: 0 11px;
    color: var(--span-color-text);
  }
}
</style>
